<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-01-24 15:58:06
 * @LastEditors: your name
 * @LastEditTime: 2024-01-27 09:39:03
-->
<template>
    <panel :panelStyle="{
        width: '500px',
        pointerEvents: 'all',
        backgroundColor: 'rgba(0,0,0,.2)',
        color: '#fff', position: 'absolute',
        top: '100px', left: '30px'
    }">
        <template #head>
            <span>地图场景配置</span>
        </template>
        <template #content>
            <div style="padding: 20px;">
                <div class="divider">
                    <span style="display:inline-block; width: 100px">全局特效</span>
                </div>
                <hr />
                <div class="skySwitch">
                    <span style="display:inline-block; width: 100px">天空切换:</span>
                    <div v-for="(item, index) in skyBoxOpts" class="skyitems">
                        <img :src="item.pic" alt="" class="imgStyle" @click="changeSky(viewer, item.key)" />
                        <span>{{ item.title }}</span>
                    </div>
                </div>
                <div class="modelSwith">
                    <span style="display:inline-block; width: 130px">模型特效切换:</span>
                    <a-radio-group @change="changeEffect" v-model:value="currentEffect" name="radioGroup"
                        style="color:#fff">
                        <a-radio v-for="item in sceneOptions" :value="item.value">{{ item.label }}</a-radio>
                    </a-radio-group>
                </div>
                <div class="modelSwith">
                    <span style="display:inline-block; width: 100px">道路效果:</span>
                    <a-radio-group @change="changeRoad" v-model:value="currentRoad" name="radioGroup">
                        <a-radio v-for="item in roadOptions" :value="item.value">{{ item.label }}</a-radio>
                    </a-radio-group>
                </div>
                <div class="modelSwith" style="margin-top: 10px;">
                    <span style="display:inline-block; width: 100px">天气效果:</span>
                    <a-radio-group @change="changeC" v-model:value="currentClimate" name="radioGroup">
                        <a-radio v-for="item in climateOptions" :value="item.value">{{
                            item.label
                        }}</a-radio>
                    </a-radio-group>
                </div>
                <div class="modelSwitch" style="margin-top: 10px;display: flex;align-items: center;">
                    <span style="display:inline-block; width: 100px">积雪程度:</span>
                    <span style="display:inline-block; width: 200px"><a-slider v-model:value="snowRate" :min="0" :max="1"
                            :step="0.01" /></span>
                    <a-input-number v-model:value="snowRate" :min="0" :max="1" style="margin-left: 16px" />
                </div>
                <div class="modelSwitch" style="margin-top: 10px;display: flex;align-items: center;">
                    <span style="display:inline-block; width: 100px">雨水涟漪:</span>
                    <span style="display:inline-block; width: 200px"><a-slider v-model:value="rainRate" :min="0" :max="1"
                            :step="0.01" /></span>
                    <a-input-number v-model:value="rainRate" :min="0" :max="1" style="margin-left: 16px" />
                </div>
                <hr />
                <div class="modelSwitch" style="margin-bottom: 20px;">
                    <div style="width: 100px">城市特效:</div>
                    <hr />
                    <a-checkbox-group @change="handleCityEffect" v-model:value="effectList" :options="cityEffectOptions" />
                </div>
                <a-button style="margin-left: 10px;margin-top: 10px;" @click="changeScene">切换场景</a-button>
            </div>
        </template>
    </panel>
</template>
<script setup>
import { ref, inject,watch } from 'vue'
import panel from '@/components/panel.vue';
import { changeSky, changeCityEffect, loadLines, removeLines,climateChange,flyToTile } from '@/cesiumTools/sceneManager'
import { skyBoxData, sceneOptions, roadOptions, climateOptions,cityEffectOptions } from '@/config/config.js'

// 获取viewer
const { viewer, tilesets } = inject('$viewer_tile')

// 天空盒配置
const skyBoxOpts = skyBoxData()

const currentEffect = ref(null)

const changeEffect = (e) => {
    changeCityEffect(e.target.value, tilesets[0])
}

// 当前的道路效果
const currentRoad = ref(null)

const changeRoad = (e) => {
    removeLines(viewer)
    const target = roadOptions.find(item => item.value === e.target.value)
    if (target) {
        const { dataSource, value } = target
        const isFlow = value === 'flow' ? true : false
        loadLines(viewer, dataSource, isFlow)
    }

}

// 当前的天气效果
const currentClimate = ref(null)

const changeC = (e) => {
    const target = climateOptions.find(item => item.value === e.target.value)
    climateChange(target,viewer)
}

const rainRate=ref(0)
const snowRate=ref(0)

// 监听雨水涟漪的大小变化
watch(rainRate,val=>{
    if (val) {
        tilesets[1].customShader.uniforms.u_snowAlpha.value = 0;
        tilesets[1].customShader.uniforms.u_rainAlpha.value = val;
    }
})

// 监听积雪程度
watch(snowRate,val=>{
    if (val) {
        tilesets[1].customShader.uniforms.u_rainAlpha.value = 0;
        tilesets[1].customShader.uniforms.u_snowAlpha.value = val;
    }
})


let isCityModelView=ref(true)
const changeScene=()=>{
    // 视角跳转到倾斜摄影
    isCityModelView.value && flyToTile(viewer,tilesets[1])
    !isCityModelView.value && flyToTile(viewer,tilesets[0])
    isCityModelView.value=!isCityModelView.value
}

const effectList=ref([])

const handleCityEffect=(e)=>{
    console.log(e);
    const renderList=cityEffectOptions.filter(item=>e.indexOf(item.label)>=0)
    console.log(renderList);
    renderList.forEach(item=>{
        const {addMethod}=item
        addMethod(viewer)
    })
}

</script>

<style lang="scss">
.sceneManger {
    width: 25%;
    position: absolute;
    top: 4%;
    left: 4%;
    z-index: 999;
}

.skySwitch,
.modelSwith {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}

.skyitems {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;

    >img {
        &:hover {
            box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
    }
}

.imgStyle {
    width: 40px;
    height: 40px;
}

.sliderArea {
    display: flex;
    align-items: center;

    .slider {
        width: 100px;
    }
}

.divider {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
